<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Slide Menu Push Page Content</title>
<style>
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'),local('OpenSans-Italic'),url(http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;src:local('Open Sans Bold Italic'),local('OpenSans-BoldItalic'),url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf) format('truetype')}

body{padding:0;margin:0;}
.back{
background-color:#111;
padding:5px 10px;
color:#fff;
position:absolute;
top:23px;
left: 100px;
}
h1{
margin:50px auto 15px;
font-weight:700;font-family:'Open Sans',Helvetica,Arial,sans-serif;
}
h2{
float:left;text-align:left;width:100%;font-weight:400;margin:10px;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:16px;
}
p{margin-bottom:30px;font-family:'Open Sans',Helvetica,Arial,sans-serif;}
#page_content{background:#ddd;transition:all .4s ease-in-out;margin:0;padding:20px;text-align:center;}
.menu{position:absolute;top:23px;right:135px;text-align:center;padding:0;color:#000;font-size:44px;font-weight:400;line-height:25px;cursor:pointer;transition:all .4s ease-in-out}
#css-menu{position:fixed;top:0;right:-240px;z-index:9999;background:#2C2C2D;height:100%;transition:all .4s ease-in-out;}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;  font-family: "Open Sans", sans-serif;font-size: 14px;position: relative;}
#cssmenu a {line-height: 1.3;padding: 12px 15px;}
#cssmenu {width: 240px;}
#cssmenu > ul > li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;}
#cssmenu > ul > li:first-child {border-top:none;}
#cssmenu > ul > li:last-child {border-bottom:1px solid #3d3d3d;}
#cssmenu > ul > li:last-child > a {border-bottom: 1px solid #161616;}
#cssmenu > ul > li > a {font-size: 14px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #2C2C2D;padding: 12px 15px;}
#cssmenu > ul > li > a:hover {text-decoration: none;background:#3d3d3d}
#cssmenu > ul > li.active {font-weight:700;}
#cssmenu > ul > li.home .close-menu{background: #2C2C2D;color: #fff;font-size:18px;font-weight:700;padding: 12px 15px;display:block}
#cssmenu > ul > li.has-sub > a:after {content: '';position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #ffffff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul.expand{height:200px;overflow:auto}
#cssmenu ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}
#cssmenu ul ul a:hover {color: #000;}
#cssmenu ul ul li {border-bottom: 1px solid #c9c9c9;}
#cssmenu ul ul li.odd a {background: #e5e5e5;}
#cssmenu ul ul li:last-child{border:none}
#cssmenu ul ul li.odd .tombolpaypal a{background:none}
#cssmenu ul ul li.odd:last-child{border:0;text-align:center;padding:10px 5px 0}
.tombolpaypal{text-align:center;text-decoration:none;padding:0;background:0}
.paypal{background:#555;border:0;margin:0 auto;padding:5px 18px;font-size:18px;font-weight:700;color:#fff;text-align:center;display:inline-block;border-radius:3px}
.paypal:hover{background:#333}
.tombolpaypal a{text-decoration:none}
.tombolpaypal span.infopaypal{color:#333;font-size:14px;margin:0;padding:0;line-height:1.4em}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
</head>
<body>

<a href="http://www.kompiajaib.com/2014/11/vertical-slide-menu-push-page-content.html" title="Back to article"><div class="back">
Back to article
</div></a>
<div class='menu'>&#8801;</div>
<div id='css-menu'>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
  <li class='home'><span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'>&#8801;</span></li>
  <li><a href='http://www.kompiajaib.com/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
   <li><a href='#' itemprop='url' title='Daftar Isi'><span itemprop='name'>Daftar Isi</span></a></li>
   <li class='has-sub'><a href='#' title='About This Blog'><span>About This Blog</span></a>
      <ul>
         <li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
         <li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
         <li class='last'><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
      </ul>
   </li>
<li><a href='#' itemprop='url' title='Forum'><span itemprop='name'>Forum</span></a></li>
<li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Pasang Iklan</span></a></li>
   <li class='has-sub'><a href='#' title='More'><span>Web Tools</span></a>
      <ul class='expand'>
<li><a href='#' itemprop='url' title='Blogger Button Generator'><span itemprop='name'>Blogger Button Generator</span></a></li>
<li><a href='#' itemprop='url' title='Speed Test'><span itemprop='name'>Speed Test</span></a></li>
<li><a href='#' itemprop='url' title='Speed Test 2'><span itemprop='name'>Speed Test 2</span></a></li>
<li><a href='#' itemprop='url' title='Color Code'><span itemprop='name'>Color Code</span></a></li>
<li><a href='#' itemprop='url' title='Parse HTML'><span itemprop='name'>Parse HTML</span></a></li>
<li><a href='#' itemprop='url' title='Pagerank Checker'><span itemprop='name'>Pagerank Checker</span></a></li>
<li><a href='#' itemprop='url' title='Al-Quran Flash'><span itemprop='name'>Al-Quran Flash</span></a></li>
<li><a href='#' itemprop='url' title='Photoshop Online'><span itemprop='name'>Photoshop Online</span></a></li>
<li><a href='#' itemprop='url' title='Online TV'><span itemprop='name'>Online TV</span></a></li>
         <li class='last'><a href='#' rel='nofollow' target='_blank' title='Online TV'><span>Character Count Tool</span></a></li>
      </ul>
   </li>
    <li class='has-sub'><a href='#' title='Donasi Untuk Blog Ini'><span>Donasi Untuk Blog Ini</span></a>
      <ul>
          <li>
<span class='tombolpaypal'>
    <span class='infopaypal'>Secangkir kopi selalu menemani saya membuat tutorial. Donasi Anda bisa membantu saya menyediakannya.<br/>
        Terima kasih.</span>
    <a href='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;amp;hosted_button_id=2RDHCU736ZPXJ' target='_blank' title='Donasi via Paypal'>
    <span class='paypal'>Donasi via Paypal</span></a>
</span>
    </li>
      </ul>
   </li>
</ul>
</nav>
</div>

<div id="page_content">
<h1>Demo Page</h1>
<p>Vertical Slide Menu Push Page Content</p>
<script>
    for(var i = 0; i < 40; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); }
	</script>
    <div style="clear:both"></div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".menu").click(function(){$("#css-menu").css({right:"0"});$("#page_content").css({margin:"0 240px 0 -240px"})});$(".close-menu").click(function(){$("#css-menu").css({right:"-240px"});$("#page_content").css({margin:"0"})})});
$("#cssmenu ul ul li:odd").addClass("odd");$("#cssmenu ul ul li:even").addClass("even");$("#cssmenu > ul > li > a").click(function(){$("#cssmenu li").removeClass("active");$(this).closest("li").addClass("active");var e=$(this).next();if(e.is("ul")&&e.is(":visible")){$(this).closest("li").removeClass("active");e.slideUp("normal")}if(e.is("ul")&&!e.is(":visible")){$("#cssmenu ul ul:visible").slideUp("normal");e.slideDown("normal")}if($(this).closest("li").find("ul").children().length==0){return true}else{return false}});
//]]>
</script>
</body>
</html>